<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
		<style type="text/css">
			/*这个指令页面选择器,有这个属性就是执行这个样式*/
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<h3>姓名（单值），年龄（单值），爱好（数组），女朋友（对象），豪车（对象数组）</h3>
		<div id="app" v-cloak>
			{{name}},{{age}}
			<hr >
			{{hobby}},{{hobby[0]}},{{hobby[hobby.length-1]}}
			<hr >
			{{girl}}
			<hr >
			{{cars[0].name}},{{cars[0].color}}<br>
			{{cars[1].name}},{{cars[1].color}}<br>
			{{cars[2].name}},{{cars[2].color}}
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:"#app",
			data:{
				msg:"hello vueJS!",
				name:"陈强",
				age:18,
				hobby:["乒乓球","爬山","唱歌"],
				girl:{
					name:"李梅",
					age:16,
					hobby:"爬山"
				},
				cars:[
					  {name:"劳斯莱斯",color:"white"},
				      {name:"奔驰",color:"red"},
					  {name:"宝马",color:"green"},
					 ]
			}
		});
	</script>
</html>
